<template>
	<y-popup ref="worksPopup" mode="bottom" round='12px' :zIndex="200">
		<view class="px-18 text-black py-30">
			<view class="text-center fs-20 fw-600 ">选择生成方式</view>
			<view class="grid-columns-2 gap-10 mt-20 text-white">
				<view class="works py-13 px-12 flex flex-column"
					:style="`background-image:url(${system.domain}/app/ycSora/image/sl.png)`"
					@click="$tool.debounce(emit('onSelected',1))">
					<text class="fs-20 fw-600">消耗算力</text>
					<text class="fs-14">可用{{USERINFO?.point}}点</text>
				</view>
				<view class="works py-13 px-12 flex flex-column"
					:style="`background-image:url(${system.domain}/app/ycSora/image/shcs.png)`"
					@click="$tool.debounce(emit('onSelected',0))" v-if="USERINFO?.productions>0">
					<text class="fs-20 fw-600">消耗次数</text>
					<text class="fs-14">剩余次数{{USERINFO?.productions}}</text>
				</view>
				<view class="works py-13 px-12 flex flex-column" v-else @click="$tool.debounce(emit('onSelected',2))"
					:style="`background-image:url(${system.domain}/app/ycSora/image/sp.png)`">
					<text class="fs-20 fw-600">观看广告</text>
					<text class="fs-14">看广告获取次数</text>
				</view>
			</view>
		</view>
		<view @click="worksPopup.close()"
			class=" w-30 h-30 text-grey-1 round-circle flex flex-center absolute right-10 top-18"
			style="background: rgba(116,116,128,0.08);;">
			<text class="iconfont icon-guanbi text-333 fs-14 fw-600"></text>
		</view>
	</y-popup>
</template>

<script setup>
	import { ref } from 'vue';
	import { useWebConfigStore, useRefs, useUserStore } from '@/stores'
	import system from '@/utils/system';
	import { $tool } from '@/utils';
	const { USERINFO } = useRefs(useUserStore())
	const emit = defineEmits(['onSelected'])
	const worksPopup = ref(null)
	const open = () => {
		worksPopup.value.open()
	}
	const close = () => {
		worksPopup.value.close()
	}
	defineExpose({ open, close })
</script>

<style>
	.works {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 156rpx;
	}
</style>